<template>
  <view>
    <my-modal ref="modal" title="选择房台号" width="92%" maskBg="rgba(0, 0, 0, 0.6)">
      <view v-if="tabbar && tabbar.length > 0" style="height: 60vh">
        <scroll-view scroll-y scroll-with-animation class="tab-view">
          <view v-for="(item, index) in tabbar" :key="index" class="tab-bar-item" :class="[currentTab == index ? 'active' : '']" :data-current="index" @tap.stop="swichNav(index)">
            <text>{{ item.name }}</text>
          </view>
        </scroll-view>

        <block v-for="(item, index) in tabbar" :key="index">
          <scroll-view v-if="currentTab == index" scroll-y class="right-box">
            <view class="page-view">
              <view class="class-box">
                <view class="class-item">
                  <!-- <view class="class-name">{{ item.name }}</view> -->
                  <view v-if="rooms && rooms.length > 0" class="g-container">
                    <block v-for="room in rooms" :key="room.roomid">
                      <view v-if="room.typeid === item.id" class="g-box" @tap.stop="selectRoom(room)" :data-key="room.roomid">
                        <view class="g-title">{{ room.roomid }}</view>
                      </view>
                    </block>
                  </view>
                </view>
              </view>
            </view>
          </scroll-view>
        </block>
      </view>
      <view v-else style="padding: 10vh 0">
        <tui-no-data :fixed="false" imgUrl="/static/images/no-data/no-data.png">暂未获取到房台数据</tui-no-data>
      </view>
    </my-modal>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 0, //预设当前项的值

      selectNav: null,

      tabbar: null, // 侧边栏 - 类目
      rooms: null // 内容区 - 房台
    }
  },

  methods: {
    open(param) {
      const bid = this.$format(param, 'bid')
      if (!bid) {
        this.$msg('text', '暂未获取到门店号')
        return
      }

      this.bid = bid
      // this.bid = 90 // 测试模拟
      this.initLoginInfo().then(() => {
        this.getRoomType()
        this.getRoom()

        this.$refs.modal.open({ showClose: this.$format(param, 'showClose', true) })
      })
    },

    selectRoom(room) {
      if (this.$isEmpty(room)) return this.$msg('text', '暂且无法选择该房台号')
      this.$emit('select', room)
    },

    close() {
      this.$emit('afterModalClose')
      this.$refs.modal.close()
    },

    // 点击标题切换当前页时改变样式
    swichNav(current) {
      this.currentTab = current
    },

    /**
     * 获取房台类型列表
     * 场景：未知
     */
    getRoomType(bid = this.bid) {
      const baseParam = this.getBase(['token', 'selectuniacid'])
      if (!baseParam) return
      Object.assign(baseParam, { bid })
      console.param('获取房台类型列表', baseParam)
      this.$api
        .getRoomType(baseParam)
        .then(res => {
          console.res('获取房台类型列表', res)

          this.tabbar = this.$format(res, 'data')
        })
        .catch(err => {
          console.err('获取房台类型列表', err)
          this.errMsg(err, '获取房台类型列表失败')
        })
    },
    /**
     * 获取房台列表
     * 疑问 ： 因为是跟 门店id: bid 绑定才能获取到的。考虑到切换门店不能获取到旧的房台数据，故暂时不做缓存
     */
    getRoom(bid = this.bid) {
      const baseParam = this.getBase(['token', 'selectuniacid'])
      if (!baseParam) return
      Object.assign(baseParam, { bid })
      console.param('获取房台列表', baseParam)
      this.$api
        .getRoom(baseParam)
        .then(res => {
          console.res('获取房台列表', res)
          this.rooms = this.$format(res, 'data')
        })
        .catch(err => {
          console.err('获取房台列表', err)
          this.errMsg(err, '获取房台列表失败')
        })
    }

    // 选择房台号
    // selectRoom(room) {
    //   if (this.$isEmpty(room)) return this.$msg('text', '暂且无法选择该房台号')
    //   this.$store.dispatch('Business/setSelectRoom', room)
    //   console.log('选中的房台号 >>>', this.$store.getters.selectRoom)
    //   uni.navigateBack()
    // }
  }
}
</script>

<style lang="scss" scoped>
/* 左侧导航布局 start */

/* 隐藏scroll-view滚动条 */
::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

.tui-searchbox {
  width: 100%;
  height: 92rpx;
  padding: 0 30rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  left: 0;
  top: 0;
  /* #ifdef H5 */
  top: 44px;
  /* #endif */
  z-index: 100;
}

.tui-searchbox::after {
  content: '';
  position: absolute;
  border-bottom: 1rpx solid #d2d2d2;
  -webkit-transform: scaleY(0.5);
  transform: scaleY(0.5);
  bottom: 0;
  right: 0;
  left: 0;
}

.tui-search-input {
  width: 100%;
  height: 60rpx;
  border-radius: 30rpx;
  font-size: 26rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tui-search-text {
  padding-left: 16rpx;
}

.tab-view {
  width: 200rpx;
  height: 100%;
  position: fixed;
  left: 0;
  z-index: 10;
  background-color: $color-primary-bg;
}

.tab-bar-item {
  width: 200rpx;
  height: 110rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26rpx;
  color: $color-primary-grey-text;
  font-weight: 400;
}

.active {
  position: relative;
  color: $color-primary-title;
  // font-size: 30rpx;
  // font-weight: 600;
  background: #333952;
}

.active::before {
  content: '';
  position: absolute;
  height: 30rpx;
  left: 0;
}

/* 左侧导航布局 end */

.right-box {
  width: 100%;
  height: 100%;
  position: fixed;
  padding-left: 220rpx;
  box-sizing: border-box;
  left: 0;
  background: #333952;
}

.page-view {
  width: 100%;
  overflow: hidden;
  padding-top: 20rpx;
  padding-right: 20rpx;
  box-sizing: border-box;
  padding-bottom: env(safe-area-inset-bottom);
}

.swiper {
  width: 100%;
  height: 220rpx;
  border-radius: 12rpx;
  overflow: hidden;
  transform: translateZ(0);
}

/* #ifdef MP-WEIXIN */
.swiper .wx-swiper-dot {
  width: 8rpx;
  height: 8rpx;
  display: inline-flex;
  background: none;
  justify-content: space-between;
}

.swiper .wx-swiper-dot::before {
  content: '';
  flex-grow: 1;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 16rpx;
  overflow: hidden;
}

.swiper .wx-swiper-dot-active::before {
  /* background: #fff; */
}

.swiper .wx-swiper-dot.wx-swiper-dot-active {
  width: 16rpx;
}

/* #endif */

/* #ifndef MP-WEIXIN */
>>> .swiper .uni-swiper-dot {
  width: 8rpx;
  height: 8rpx;
  display: inline-flex;
  background: none;
  justify-content: space-between;
}

>>> .swiper .uni-swiper-dot::before {
  content: '';
  flex-grow: 1;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 16rpx;
  overflow: hidden;
}

>>> .swiper .uni-swiper-dot-active::before {
  background: #fff;
}

>>> .swiper .uni-swiper-dot.uni-swiper-dot-active {
  width: 16rpx;
}

/* #endif */

.slide-image {
  width: 100%;
  height: 220rpx;
}

.class-box {
}

.class-item {
  width: 100%;
  box-sizing: border-box;
  padding: 20rpx;
  margin-bottom: 20rpx;
  border-radius: 12rpx;
}

.g-container {
  display: flex;
  display: -webkit-flex;
  justify-content: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
}

.g-box {
  margin-right: 10px;
  text-align: center;
  padding-bottom: 40rpx;
}

.g-image {
  width: 120rpx;
  height: 120rpx;
}

.g-title {
  font-size: $font-size-xs;
  background: $color-primary-title;
  color: $color-primary-bg;

  border-radius: 2px;
  width: 80px;
  height: 45px;
  line-height: 45px;
  padding: 0 5px;

  text-align: center;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
</style>
